{extend name="default:layout:base" /}

{block name="main"}
<div class="layui-tab layui-tab-brief" style="padding: 0px 10px 0px 10px;">
    <ul class="layui-tab-title">
        {volist name="tab_nav.tab_list" id="tab"}
        <li class="{if $key eq $tab_nav['current_tab']}layui-this{/if}"><a href="{$tab.href}">{$tab.title}</a></li>
        {/volist}
    </ul>
</div>

<div class="layui-row" style="margin-top: 10px;">
    <div class="layui-col-xs10">
        <form class="layui-form" action="">
            <input type="hidden" value="{$type}" name="type">
            <div class="layui-col-xs5" style="margin-left: 5px; line-height: 38px;">
                <div class="layui-form-item">
                    <input name="search_key" placeholder="请输入名称搜索" value="{:input('search_key')}" class="layui-input"
                           type="text">
                </div>
            </div>
            <div class="layui-col-xs4" style="margin-left: 5px; line-height: 38px;">
                <button class="layui-btn layui-btn-primary" lay-submit="" lay-filter="formDemo">
                    <i class="fa fa-search"></i>
                </button>
            </div>
        </form>
    </div>
    <div class="layui-col-xs2 text-right">
        <a href="javascript:;" id="picker" class="layui-btn layui-btn-sm layui-btn-normal">新增{$types[$type]}</a>
    </div>
</div>
<div class="layui-row hide" id="process-bar">
    <p class="layui-font-red">上传文件需要时间，请勿关闭浏览器！</p>
    <div class="layui-progress layui-progress-big" lay-showpercent="true" lay-filter="upload-process">
        <div class="layui-progress-bar " lay-percent="5%"></div>
    </div>
</div>

<div class="layui-tab" lay-filter="docDemoTabBrief">
    <div class="layui-tab-content">
        {if count($data_list)}
        {switch name="type"}
        {case value="image"}{include file="default/mpmaterial/components/image" /}{/case}
        {case value="news"}{include file="default/mpmaterial/components/news" /}{/case}
        {case value="voice"}{include file="default/mpmaterial/components/voice" /}{/case}
        {case value="video"}{include file="default/mpmaterial/components/video" /}{/case}
        {/switch}
        <div id="page">{$pager|raw}</div>
        {else/}
        <div class="text-center">暂无数据！</div>
        {/if}
    </div>
</div>

{/block}

{block name="js"}
<script>
    layui.use(['form', 'upload', 'jquery', 'element'],function(){
        var form = layui.form,
            upload = layui.upload
        , $ = layui.jquery
        , element = layui.element;

        var type = "{$type}";

        //点击删除单个
        $('.del-btn').on('click', function () {
            ids = [$(this).data('id')];
            delRequest();
        });

        //点击批量删除
        $('.del-batch-btn').on('click', function () {
            $.each($('.id:checked'), function(i, item){
                ids.push($(item).val());
            });
            delRequest();
        });

        //请求服务端进行删除操作
        var delRequest = function () {
            if(ids.length < 1){
                layer.alert('请选中要删除的数据');
            }
            layer.confirm('删除后无法恢复，你确定吗？', {
                title: '提示',
                btn: ['是','不'] //按钮
            }, function(){
                requestPost("{:url('delPost', ['type' => $type])}", {'ids': ids, 'type': "{$type}"}, function () {
                    location.reload();
                });
            });
        };

        {if $type eq 'news'}
        $('#picker').on('click', function () {
            var index = layer.open({
                title: "新增图文",
                type: 2,
                shade: 0.2,
                maxmin:true,
                area: ['95%', '95%'],
                content: "{:url('newsadd')}",
            });
            $(window).on("resize", function () {
                layer.full(index);
            });
        });
        {else /}
        var upload_index, err = null;
        upload.render({
            elem: '#picker'
            ,url: '{:url("uploadPost", ["type" => $type])}'
            ,multiple: true
            ,accept: type ==='image' ? 'images' : type //允许上传的文件类型images（图片）、file（所有文件）、video（视频）、audio（音频）
            ,size: "{$config[$type.'_size']/1000}" //最大允许上传的文件大小
            ,exts: "{$config[$type.'_ext']}".split(',').join('|')
            ,number: 5 //可同时传5张
            ,before: function () {
                upload_index = layer.load(1);
                err = null;
                $('#process-bar').removeClass('hide');
            }
            ,done: function(res, index, upload){ //上传后的回调
                if(res.code !== 1){
                    layer.alert(res.msg, function(index){
                        $('#process-bar').addClass('hide');
                        layer.close(upload_index);
                        layer.close(index);
                    });
                    err = res.msg;
                    return false;
                }
            }
            ,allDone: function(obj){ //当文件全部被提交后，才触发
                //console.log(obj);
                if(err === null){
                    layer.close(upload_index);
                    layer.msg("上传完成", {time: 1000}, function () {
                        location.href = location.href.replace(/page=\d+$/g, "page=1"); //回到首页
                    });
                }
            }
            ,progress: function(n, elem){
                var percent = n + '%'; //获取进度百分比
                element.progress('upload-process', percent); //可配合 layui 进度条元素使用
            }
        })
        {/if}
    });
</script>
{/block}
